/**
 * Created by zhangsong on 2019-05-08.
 */
import React, { Component } from 'react';
import moment from 'moment';
import { Button, Table } from 'antd';
import { routerRedux } from 'dva/router';
import { formatMessage } from '@/utils/i18n';
import { connect } from 'dva';
import { PageHeaderWrapper } from '@ant-design/pro-layout';
import { VehicleApplication } from '@/constants/routes';
import { Pagination } from '@/constants/styleConfig';
import Modal from '@/components/Modal';
import VehicleReducer from '@/dva/application/vehicles';
import Search from './search';

const { confirm } = Modal;
const { Namespace, Effects } = VehicleReducer;

@connect(
  state => ({
    vehicleStore: state[Namespace],
  }),
  dispatch => ({
    handleQuery: data =>
      dispatch({
        type: `${Namespace}/${Effects.listByParam}`,
        data,
      }),
    removeById: data =>
      dispatch({
        type: `${Namespace}/${Effects.removeById}`,
        data,
      }),
  }),
)
class Index extends Component {
  componentDidMount() {
    const { handleQuery } = this.props;
    handleQuery({});
  }

  onDetailClick = (text, record) => {
    const { id } = record;
    routerRedux.push(`${VehicleApplication.detail.url}?id=${id}`);
  };

  handleUpdate = (text, record) => {
    const { id } = record;
    routerRedux.push(`${VehicleApplication.modify.url}?id=${id}`);
  };

  handleDelete = (text, record) => {
    const { vehicleStore, removeById } = this.props;
    confirm({
      title: formatMessage('baseInfo.askDeleteRecord'),
      okText: formatMessage('button.sure'),
      cancelText: formatMessage('button.cancel'),
      autoFocusButton: null,
    })
      .then(() => {
        removeById({
          id: record.id,
          page: vehicleStore.page,
          pageSize: vehicleStore.pageSize,
          query: vehicleStore.query,
        });
      })
      .catch();
  };

  renderColumns = () => [
    {
      title: formatMessage('applicationVehicle.columns.vehicleNumber.name'),
      dataIndex: 'vehicleNumber',
    },
    {
      title: formatMessage('applicationVehicle.columns.make.name'),
      dataIndex: 'make',
    },
    {
      title: formatMessage('applicationVehicle.columns.colour.name'),
      dataIndex: 'colour',
    },
    {
      title: formatMessage('applicationVehicle.columns.expiryDate.name'),
      dataIndex: 'expiryDate',
      render: text => (text ? moment(text).format(formatMessage('datetimeFormat.date')) : null),
    },
    {
      title: formatMessage('applicationVehicle.columns.category.name'),
      dataIndex: 'category',
    },
    {
      title: formatMessage('applicationVehicle.columns.staffNo.name'),
      dataIndex: 'staffNo',
    },
    {
      title: formatMessage('applicationVehicle.columns.department.name'),
      dataIndex: 'department',
    },
    {
      title: formatMessage('applicationVehicle.columns.telNo.name'),
      dataIndex: 'telNo',
    },
    {
      title: formatMessage('button.operator'),
      key: 'operator',
      render: (text, record, index) => {
        const onUpdateClick = () => {
          this.handleUpdate(text, record, index);
        };
        const onDeleteClick = () => {
          this.handleDelete(text, record, index);
        };
        const onDetailClick = () => {
          this.onDetailClick(text, record, index);
        };
        return (
          <div>
            <Button
              className="recovery"
              htmlType="button"
              size="small"
              onClick={onDetailClick}
              icon="eye"
            />
            <Button
              className="recovery"
              htmlType="button"
              type="dashed"
              size="small"
              onClick={onUpdateClick}
              icon="edit"
            />
            <Button
              htmlType="button"
              type="danger"
              size="small"
              onClick={onDeleteClick}
              icon="delete"
            />
          </div>
        );
      },
    },
  ];

  onChange = pagination => {
    const { current, pageSize } = pagination;
    const { handleQuery, vehicleStore } = this.props;
    const { query } = vehicleStore;
    handleQuery({
      query,
      page: current,
      pageSize,
    });
  };

  render() {
    const { vehicleStore = {} } = this.props;
    const { pageSize, page, listData, total, listLoading } = vehicleStore;
    const pagination = Pagination({
      page,
      pageSize,
      total,
    });
    return (
      <PageHeaderWrapper>
        <Search />
        <Table
          rowKey="id"
          loading={!!listLoading}
          columns={this.renderColumns()}
          dataSource={listData}
          onChange={this.onChange}
          pagination={pagination}
        />
      </PageHeaderWrapper>
    );
  }
}

export default Index;
